<template>
  <div id="personal">
    <top-bar :title="title"></top-bar>
    <p>&nbsp;</p>
    <div class="code_box">
      <div ref="qrcode" class="qrcode"></div>
      <p>推荐给好友扫一扫 下载平安到家</p>
    </div>
    <!-- <p class="phone_img">保存到手机</p> -->
  </div>
</template>
<script>
import { Icon, Field, FieldItem, Toast, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import QRCode from 'qrcodejs2';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
export default {
  components: {
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [FieldItem.name]: FieldItem
  },
  data() {
    return {
      title: '我的二维码'
    };
  },
  mounted() {
    let str = localStorage.getItem('USER_INFO');
    let userobj = JSON.parse(str);
    let params = {
      tk: userobj.token
    };
    Loading.show();
    http.post('/pakj/common/getQrcodes', params).then(res => {
      Loading.hide();
      if (res.data.code === '000000') {
        this.qrcode(res.data.data.url);
        console.log(res.data.data.url);
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    qrcode(url) {
      let qrcode = new QRCode(this.$refs.qrcode, {
        width: 200,
        height: 200, // 高度
        text: url // 二维码内容
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#personal {
  height: 100vh;
  background-color: color-primary-background;
}

.code_box {
  width: 600px;
  height: 600px;
  background-color: #fff;
  margin: 80px auto;
}

.qrcode {
  padding-top: 70px;
  margin-left: 105px;
}

.code_box p {
  text-align: center;
  font-size: 28px;
  color: #333;
  margin-top: 50px;
}

.phone_img {
  margin: 180px 76px 0px 76px;
  height: 98px;
  line-height: 98px;
  color: #FF6917;
  font-size: 32px;
  text-align: center;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  border: 2px solid #ccc;
}
</style>
